<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历： 用于DOM树中遍历元素【元素嵌套，父子级】 
		children()			功能：获取匹配元素集合中每个元素的子元素
		parent()			功能：获取匹配元素集合中每个元素的父元素
		
		siblings()			功能：获取匹配元素集合中每个元素的兄弟元素
		
		next()				功能：获取匹配元素集合中每个元素的下一个兄弟元素
		prev()				功能：获取匹配元素集合中每个元素的上一个兄弟元素
		
		each()				功能：遍历匹配元素的集合--遍历所有子元素
							语法糖：each(function(index,element){
								$(element).text(``)
								注意:打印遍历的信，不可以使用单双引号+拼接
							})
								index：下标  element：元素 形参
		-->
		<style>
			.container{
				border: 1px solid #b6b6b6;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: #aaaaff;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 10px;
				padding: 5px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html：  div.container 父级  6个div.box 每个#box1  子级
					 6个按钮
			css：	 .container添加样式 边框1px、内外边距10px
					 .box添加样式       背景色、内外边距10px
					 button添加样式     外边距:5px
			jq: 引入
		 -->
		 <div class="container">
		 	<div class="box" id="box1">盒子1</div>
		 	<div class="box" id="box2">盒子2</div>
		 	<div class="box" id="box3">盒子3</div>
		 	<div class="box" id="box4">盒子4</div>
		 	<div class="box" id="box5">盒子5</div>
		 	<div class="box" id="box6">盒子6</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		<script>
			/* 1.点击 获取子元素 按钮..·实现.container 下所有子元素添加背景色 */
			$("#gc").click(function(){
				//通过 父找子 函数 --添加效果
				$(".container").children().css("background-color","#ff0");
			});
			/*2.点击 获取父元素 按钮 实现.container 添加背景色*/
			$("#gp").click(function(){
				$(".box").parent().css("background-color","#55aaff");
			});
			/*3.点击 获取兄弟元素 按钮 实现除了 #box4 字体颜色不变，其他变色 */
			$("#gs").click(function(){
				$("#box4").siblings().css("color","#ff5500");
			});
			/*4.点击 获取下一个兄弟元素 按钮 实现#box4 下一个兄弟 添加背景色 */
			$("#gn").click(function(){
				$("#box4").next().css("background-color","#55aa7f");
			});
			/* 5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟，添加效果
												圆、背景图、背景色、盒子阴影 
			*/
		    $("#gr").click(function(){
		   	  $("#box6").prev().css({"width":"300px",
									"height":"300px",
									"border-radius":"50%",
									"background-image":"url(../img/1.gif)",
									"background-color":"#ff557f",
									"box-shadow":"0 0 10px #aaa",
									"color":"transparent"
									});
		    });
		/* 6.点击  遍历元素  按钮  实现每个盒子上，这是第几个盒子 */
			$("#loop").click(function(){
				// 通过.box 抓到6个元素【一组集合】
				 $(".box").each(function(i,e){ // e代表六个元素 i代表下标
					// 每个盒子加文字：这是第几个盒子
					$(e).text(`这是第${i+1}个盒子`);
				});
			});
		</script>
	</body>
</html>